<template>
  <div class="waterDetail">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">预约详情</span>
      <span class="header-wrap-right">
        <i class="iconseach iconfont"></i>
      </span>
    </div>
    <maxSwiper :message='skuDtlImg'/>
    <div class="waterTitle" style="font-weight:bold;">{{skuDtlData.name}}</div>
    <div class="watermark" >{{skuDtlData.description}}</div>
    <div class="waterText">
      <span style="color:red;font-size:.36rem;">¥&nbsp;{{skuDtlData.price}}</span>
    </div>
    <div class="waterText">
      <span>配送：免费</span>
    </div>
    <div v-if="skuDtlData.detail" class="richText" style="padding-bottom:1rem;" v-html="skuDtlData.detail"></div>
    <div class="showBase" @click="show">
      购买
    </div>
    <van-sku
      v-model="showBase"
      :sku="skuData"
      :goods="skuData.tree&&skuData.tree[0]&&skuData.tree[0].v&&skuData.tree[0].v[0]"
      :goods-id="1"
      :show-add-cart-btn='false'
      :close-on-click-overlay='true'
      @buy-clicked="onBuyClicked"
    >
    <template slot="sku-messages">
      <div class="cellSelection">
        <span>
        <div class="water-content" @click="showResidential">
          <span>{{Residential?Residential:'选择您的物业'}}</span>
          <span><i class="iconfont icon-xiajiantou"></i></span>
        </div>
        </span>
        <!-- <span>
          <van-field
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入留言"
            show-word-limit
            />
        </span> -->
      </div>
    </template>
  </van-sku>
   <!-- 物业小区 -->
    <van-popup v-model="markPicker" position="bottom" >
      <van-picker
        show-toolbar
        :columns="itemData"
        @cancel="markPicker=false"
        @confirm="FnResidential"
      />
    </van-popup>
  </div>
</template>
<script>
import api from '../../api/api.js'
import maxSwiper from './components/maxSwiper'
import { Sku,NavBar, Popup, Picker } from 'vant';
export default {
  data(){
    return{
      itemData:[],
      skuDtlData:{},
      value:'',
      message:'',
      skuData:[],
      houseId:'',
      pay_params:{},
      Residential:'',
      ResidentialId:'',
      showBase: false,
      markPicker: false,
      maxSwiper:[],
      skuDtlImg:[],
      fromData:{},
      Id:''
    }
  },
  created(){
    this.Id = this.$route.query.id
    this.getSku()
    this.getSkuDtl()
    this.getHouses()
  },
  methods:{
    show(){
      this.showBase = true
    },
    goback(){
      this.$router.go(-1)
    },
    // 获取商品SKU
    getSku(){
      this.$get(api.sku, {})
      .then((response) => {
        this.skuData = response.data.data
        this.skuData.tree[0].v[0].picture = this.skuData.tree[0].v[0].imgUrl
        console.log('this.skuData',this.skuData)
      })
      .catch((error) => {
        console.log(error)
      });
    },
    getSkuDtl(){
      this.$get(api.skuDtl, {})
      .then((response) => {
        this.skuDtlData = response.data.data
        this.skuDtlImg = response.data.data.images
        console.log('this.skuDtlData',this.skuDtlData)
      })
      .catch((error) => {
        console.log(error)
      });
    },
    // 获取物业
    getHouses(){
      this.$get(api.myHouses, {})
      .then((response) => {
        this.itemData = response.data.data.houses
        this.Residential = response.data.data.houses[1].text
        this.houseId = response.data.data.houses[1].id
        this.ResidentialId = response.data.data.houses[1].residential_id
      })
      .catch((error) => {
        console.log(error)
      });
    },
    onBuyClicked(data) {
      if(!this.Residential){
        this.$toast('请选择您的物业')
        return
      }
      this.$post(api.fromType, {
        goods_id: this.Id,
        sku_id: data.selectedSkuComb.id,
        quantity: data.selectedNum,
      })
      .then((response) => {
        this.fromData = response.data.data.pay_params
        var back_url=encodeURIComponent(encodeURIComponent(window.location.href));
        window.location.href =  api.waterpay+'?id='+this.fromData.id + '&from_type=' + this.fromData.from_type + '&back_url='+ back_url;
      })
      .catch((error) => {
        console.log(error)
      });
      this.showBase = false
    },
    showResidential(){
      this.markPicker = true;
    },
    FnResidential(list) {
      this.Residential = list.text
      this.houseId = list.id
      this.ResidentialId = list.residential_id
      this.markPicker = false;
      if(list.id==0){
        this.$router.push('/addHome')
        return
      }
    }
  },
  components: {
    maxSwiper,
    [NavBar.name]:NavBar,
    [Sku.name]:Sku,
    [Picker.name]:Picker,
    [Popup.name]:Popup,
  }
}
</script>

<style scoped>
  .waterDetail {
    margin-top: 1rem;
  }
  .cellSelection{
    height: 1rem;
    line-height: 1rem;
    display: block;
  }
  .water-content{
    margin: 0rem .3rem;
    display: flex;
    background: #fff;
  }
  .water-content span:nth-of-type(1){
    flex: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
  .water-content span:nth-of-type(2){
    text-align: right;
    flex: 1;
  }
  .waterTitle{
    font-size: .3rem;
    margin: .2rem .3rem;
  }
  .watermark{
    font-size: .24rem;
    margin: .2rem .3rem;
  }
  .waterText,.richText{
    margin: .2rem .3rem 0;
  }
  .showBase{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    color: #fff;
    font-size: .36rem;
    text-align: center;
    background: linear-gradient(to right, #ff6034, #ee0a24);
  }
.allpay-list{
  display: flex;
  height: 2.5rem;
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.allpay-list:nth-of-type(1){
  margin: 2rem .3rem .25rem;
}
.img-box{
  flex: 1.5;
  margin-right: .2rem;
}
.img-content{
  position: relative;
  width: 100%;
  height: 100%;
}
.img-content img{
  width: 100%;
  height: 100%;
  border-radius: .2rem 0 0 .2rem;
}
.pay-content{
  flex: 3;
  padding-top: .28rem;
}
.pay-content span{
  display: block;
  line-height: .5rem;
}
.pay-content span:nth-of-type(1){
  font-size: .32rem;
  color: #000;
  font-weight: bold;
}
.pay-content span:nth-of-type(2){
  color: #FD5585;
  font-weight: bold;
}
.pay-content .paytext{
  display: flex;
}
.pay-content .paytext span{
  flex: 1;
  line-height: .5rem;
}
.newsbox{
  position: relative;
}
.news{
  display: block;
  position: absolute;
  right: 20%;
  top: 18%;
  width: .15rem;
  height: .15rem;
  text-align: center;
  border-radius: 50%;
  background: #FF001f;
}
</style>
